import React from 'react';
import { Row, Col, Form, Input, Button, Spin, Collapse, Table, Select, Popconfirm, Card } from 'antd';
import moment from 'moment';
import { addKeyToDataSource } from '../../utils';
import { DEFAULT_PAGE_SIZE } from '../../utils/constants';
import HorizontalBarChart from './HorizontalBarChart';
import VerticalBarChart from './VerticalBarChart';
import MyAreaChart from './AreaChart';
import MyLineChart from './LineChart';
import MyPieChart from './PieChart';
import LineEchart from './LineEchart';
import styles from '../common.css';
import StackBarEchart from './StackBarEchart';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};
const formItemLayout1 = {
  labelCol: { span: 3.5 },
  wrapperCol: { span: 20.5 },
};

const formItemLayout2 = {
  labelCol: { span: 1.5 },
  wrapperCol: { span: 22.5  },
};
@Form.create()
class PrjProcessTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
    };
  }

    // 添加事件

    onKeyDown=(e) => {
      if(e.keyCode===13){
        this.handleSearch()
      }
    }
  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      dispatch({ // 调用接口，请求数据
        type: 'quality/fetchPrjProcessData', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          params: data,
        },
      });
    });
  };
  
  handleCancel = () => {
    const { form: { resetFields }, onCancel } = this.props;
    onCancel(resetFields);
    dispatch({
      type:"quality/clearQuaAnalysisData",
      payload:{},
    })
  };
  // handleAddTestReport = () => {
  //   this.setState({ // 设置状态树
  //     currentRecord: {},  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
  //     panelVisible: true, // 设置新增/编辑表单可见
  //     searchButtonVisible: false,
  //   });
  // };
  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, RelatedAnalysisData,ProjectList, form: { getFieldDecorator } }
      = this.props;
      
    const Hotfix = RelatedAnalysisData ? RelatedAnalysisData["Hotfix"]:[];
    const insStoryTrendArray = RelatedAnalysisData.StoryChangeTrend ? RelatedAnalysisData.StoryChangeTrend['insertstory'] : [];
    const delayStoryTrendArray = RelatedAnalysisData.StoryChangeTrend?RelatedAnalysisData.StoryChangeTrend['delaystory'] : [];
    const insStoryDetail = RelatedAnalysisData.StoryChangeDetail?RelatedAnalysisData.StoryChangeDetail['insertStory'] : [];
    const delayStoryDetail = RelatedAnalysisData.StoryChangeDetail?RelatedAnalysisData.StoryChangeDetail['delayStory'] : [];
    const recentVersionDensityArray = RelatedAnalysisData?RelatedAnalysisData.RecentVersionDensity : [];
    // console.log("近期密度：",recentVersionDensityArray)
    // const recentVersionDensityArray=[{name: "12-14岁", value: 14},{name: "12-16岁", value: 15}]
    const workLoadArray = RelatedAnalysisData.StoryChangeTrend ? RelatedAnalysisData.StoryChangeTrend['completedstory'] : [];
    // const workLoadArray=[{name: "12-14岁", value: 14},{name: "12-16岁", value: 15}]
    const DevWorkLoadArray =  RelatedAnalysisData?RelatedAnalysisData.DevWorkLoad : [];
    const DevRecentVersionDensityArray = RelatedAnalysisData?RelatedAnalysisData.DevRecentVersionDensity : [];
    const reoenBug = RelatedAnalysisData?RelatedAnalysisData.ReopenBug : [];
    const priorityBugArray = RelatedAnalysisData?RelatedAnalysisData.PriorityBug : [];
    const longTimeBugArray = RelatedAnalysisData?RelatedAnalysisData.LongTimeBug : [];
    const reasonBugArray = RelatedAnalysisData?RelatedAnalysisData.ReasonBug : [];
    const inprogressActionArray = RelatedAnalysisData?RelatedAnalysisData.InprogressAction : [];
    const WrongJiraArray = RelatedAnalysisData?RelatedAnalysisData.WrongJira : []
   
    const LineEchartObj = {
      style: { width: '100%', height: '200px' },
      originData: DevRecentVersionDensityArray,
    }

    const StackBarEchartObj = {
      style: { width: '100%', height: '200px' },
      originData: DevWorkLoadArray,
    }
    const insertStoryTrendObj = {
      style: { width: '100%', height: '140px' },
      // data: insStoryTrendArray,
      data: insStoryTrendArray,
      lines: [
        {
          name: '个数',
          color: '#98ff1a',
          dataKey: 'value',
        },
      ],
    };
    const delayStoryTrendObj = {
      style: { width: '100%', height: '140px' },
      data: delayStoryTrendArray,
      lines: [
        {
          name: '个数',
          color: '#98ff1a',
          dataKey: 'value',
        },
      ],
    };
    const recentVersionDensityObj = {
      style: { width: '100%', height: '200px' },
      data: recentVersionDensityArray,
      areas: [
        {
          name: '密度值',
          color: '#87CE97',
          dataKey: 'value',
        },
      ],
    };
    const workLoadObj = {
      style: { width: '100%', height: '200px' },
      data: workLoadArray,
      options: {
        barColor: '#87ce97',
        barName: 'sprint任务量/sprint周期',
      },
    };

    const priorityBugObj = {
      style: { width: '100%', height: '200px' },
      data: priorityBugArray,
    };
    const resonBugObj = {
      style: { width: '100%', height: '200px' },
      data: reasonBugArray,
    };
    // 定义表头字段及取值内容,比例按总量1000来分
    const storycolumns = [
      {
        title: 'jiraID',
        dataIndex: 'jira_id',
        key: 'jira_id',
        width: 100,
      },
      {
        title: '描述',
        dataIndex: 'summary',
        key: 'summary',
        width: 500,
      },
      {
        title: '责任人',
        dataIndex: 'assignee',
        key: 'assignee',
        width: 100,
      },
      {
        title: '版本号',
        dataIndex: 'jira_fixversion',
        key: 'jira_fixversion',
        width: 200,
      },
      {
        title: 'reporter',
        dataIndex: 'reporter',
        key: 'reporter',
        width: 100,
      },
    ];
    const jiracolums = [
      {
        title: 'jiraID',
        dataIndex: 'jira_id',
        key: 'jira_id',
        width: 100,
      },
      {
        title: '描述',
        dataIndex: 'summary',
        key: 'summary',
        width: 600,
      },
      {
        title: '责任人',
        dataIndex: 'assignee',
        key: 'assignee',
        width: 100,
      },
      {
        title: '版本号',
        dataIndex: 'jira_fixversion',
        key: 'jira_fixversion',
        width: 100,
      },
      {
        title: 'reporter',
        dataIndex: 'reporter',
        key: 'reporter',
        width: 100,
      },
    ];
    return (
      <div>
        <Row gutter={16} style={{ marginBottom: 1,marginTop: 50 }} >
          <Form layout="inline">
            <Col span={6}>
              <FormItem label="项目名称" {...formItemLayout1} >
                {getFieldDecorator('project_name', {
                  initialValue: '',
                  rules: [{
                    required: true,
                    message: '请填写项目名称',
                  }],
                })(
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    <Option key={-1} value="">请选择</Option>
                    {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                      ProjectList.map((item, index) => {
                        return (<Option key={index} value={item}>{item}</Option>);
                      })
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="版本号" {...formItemLayout1} >
                {getFieldDecorator('fix_version', {
                  initialValue: '',
                  // rules: [{
                  //   required: true,
                  //   message: '请填写版本号',
                  // }],
                })(
                  <Input onKeyDown={(e)=>this.onKeyDown(e)}/>
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="" {...formItemLayout} >
                <Button onClick={this.handleSearch}>搜索</Button>
              </FormItem>
            </Col>
          </Form>
        </Row>
        <Row  style={{ marginBottom: 1,marginTop: 20 }}>
          <Table
            columns={jiracolums}
            dataSource={Hotfix}
            title={() =><div style={{ fontSize: 16, fontWeight: 500 }}>{'近一个月的Hotfix'}</div>}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Card loading={loading} title="近6个sprint插入需求趋势">
              <MyLineChart {...insertStoryTrendObj} />
            </Card>
          </Col>
          <Col span={12}>
            <Card loading={loading} title="近6个sprint延期需求趋势">
              <MyLineChart {...delayStoryTrendObj} />
            </Card>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Table
            columns={storycolumns}
            dataSource={insStoryDetail}
            title={() => '最近一个sprint插入需求详情'}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
        <Row style={{ marginBottom: 16 }}>
          <Table
            columns={storycolumns}
            dataSource={delayStoryDetail}
            title={() => '最近一个sprint延期需求详情'}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
       
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Card loading={loading} title="近6个版本的BUG密度趋势">
              <MyAreaChart {...recentVersionDensityObj} />
            </Card>
          </Col>
          <Col span={12}>
            <Card loading={loading} title="近6个sprint的效率值">
              <HorizontalBarChart {...workLoadObj} />
            </Card>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Card loading={loading} title="个人BUG密度趋势">
              <LineEchart {...LineEchartObj} />
            </Card>
          </Col>
          <Col span={12}>
            <Card loading={loading} title="个人工作量统计">
              <StackBarEchart {...StackBarEchartObj} />
            </Card>
          </Col>
        </Row>
        <Row style={{ marginBottom: 16 }}>
          <Table
            columns={jiracolums}
            dataSource={longTimeBugArray}
            title={() => '本版本超过1天未解决的P0bug'}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
    
        <Row style={{ marginBottom: 16 }}>
          <Table
            columns={jiracolums}
            dataSource={reoenBug}
            title={() => '本版本reopen的bug'}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
       
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Card loading={loading} title="本版本的BUG优先级占比">
              <MyPieChart {...priorityBugObj} />
            </Card>
          </Col>
          <Col span={12}>
            <Card loading={loading} title="本版本的BUG原因占比">
              <MyPieChart {...resonBugObj} />
            </Card>
          </Col>
        </Row>
        
        <Row style={{ marginBottom: 16 }}>
          <Table
            columns={jiracolums}
            dataSource={inprogressActionArray}
            title={() => '进行中的改进action'}
            loading={loading}
            rowKey={record => record.id}
            bordered
            scroll={{ y: 240 }}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
          />
        </Row>
        
        <Row style={{ marginBottom: 16 }}>
          <Card loading={loading} title="JIRA规范(近一周的数据)">
            <Collapse defaultActiveKey={['1']}>
              <Panel header="缺COMMENT的BUG" key="1">
                <Table
                  columns={jiracolums }
                  dataSource={WrongJiraArray}
                  loading={loading}
                  rowKey={record => record.id}
                  bordered
                  scroll={{ y: 240 }}
                  pagination={{
                    pageSize: DEFAULT_PAGE_SIZE,
                  }}
                />
              </Panel>
            </Collapse>
          </Card>
        </Row>
       
        {/* <Row gutter={12}>
          <div className={styles.btnGroup}>
            <Button type="primary" onClick={this.handleCancel}>返回</Button>
          </div>
        </Row> */}
      </div>
    );
  }
}

export default PrjProcessTable;
